<template>
	<view>
		<uni-nav-bar :fixed="true" :border="false" @clickLeft="$pageBack()" left-icon="back" background-color="#" :status-bar="true"></uni-nav-bar>
		<view class="rbcg_top">
			<view class="rbcg_top_re">
				<image src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/rbcg.png" mode=""></image>
				<view class="texts1" @click="$pageGo('/mypage/rice/riceInstructions')">稻穗值说明</view>
				<view class="yy l2">邀新</view>
				<view class="yy l1">签到</view>
				<view class="yy r1">活动</view>
				<view class="dy flex_jc_cent">
					<view class="" style="text-align: center">
						<view class="t1">当前积分</view>
						<view class="t2">{{ data.info.points }}</view>
					</view>
				</view>
				<view class="texts">当前积分 {{ data.info.points }}，其中 {{ num }} 可选择兑换文创</view>
			</view>
			<view class="ulist">
				<view class="title">稻穗值记录</view>
				<loadstatusVue :status="data.loadStatus">
					<scroll-view class="scroll" scroll-y="true" @scrolltolower="scrolltolower">
						<view class="items flex_jc_sb" v-for="(item, index) in data.list" :key="index">
							<view class="items_l">
								<view class="t1">{{ item.title }}</view>
								<view class="time">{{ item.createTime }}</view>
							</view>
							<view class="items_r">{{ item.type }}{{ item.points }}</view>
						</view>
					</scroll-view>
				</loadstatusVue>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
import { pointsList, getData } from '@/api/user.js';
import { getConfig } from '@/api/login.js';
import loadstatusVue from '@/components/loadstatus/loadstatus.vue';
import { toast, showConfirm } from '@/utils/common.js';
const data = reactive({
	info: {},
	list: [],
	loadStatus: 'before', // 加载状态
	hasMore: true, // 是否有更多数据
	isLoading: false, // 防止重复请求的锁
	queryParams: {
		pageNum: 1,
		pageSize: 10
	}
});

const scrolltolower = () => {
	if (data.hasMore && (data.loadStatus === 'success' || data.loadStatus === 'noMore') && !data.isLoading) {
		data.queryParams.pageNum++;
		getList(true);
	}
};

// 延迟函数
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
// 设置加载状态的方法
const setLoadStatus = (status, options = {}) => {
	data.loadStatus = status;
};
// 处理响应数据的通用方法
const handleResponseData = async (res, isLoadMore = false) => {
	// 如果是加载更多，确保loading状态至少显示500ms，避免闪烁
	if (isLoadMore) {
		await delay(500);
	}
	if (res.code == 200) {
		// 处理数据
		if (isLoadMore) {
			data.list.push(...res.rows);
		} else {
			data.list = res.rows || [];
		}
		// 判断是否有更多数据
		data.hasMore = res.rows && res.rows.length >= data.queryParams.pageSize;
		// 设置状态
		if (data.list.length === 0) {
			setLoadStatus('empty');
		} else if (!data.hasMore) {
			setLoadStatus('noMore');
		} else {
			setLoadStatus('success');
		}
		return true;
	}
	return false;
};

// 获取列表数据
const getList = async (isLoadMore = false) => {
	// 防止重复请求
	if (data.isLoading) return;
	try {
		data.isLoading = true;
		if (isLoadMore) {
			if (!data.hasMore) return;
			setLoadStatus('loading');
		} else {
			setLoadStatus('before');
			// 初始加载时显示loading至少1秒，避免闪烁
			await delay(300);
		}
		const res = await pointsList(data.queryParams);
		const success = await handleResponseData(res, isLoadMore);
		if (!success) {
			// 请求失败的处理
			setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
		}
	} catch (err) {
		await delay(300);
		setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
	} finally {
		data.isLoading = false;
	}
};
const num = ref(0);
onLoad(() => {
	getData({}).then((res) => {
		if (res.code == 200) {
			Object.assign(data.info, res.data);
			getConfig({}).then((res) => {
				if (res.code == 200) {
					num.value = Math.max(data.info.points - res.data.mallNotUseUserPoints, 0);
				}
			});
		}
	});
	getList();
});
</script>

<style lang="scss">
page {
	background: #f7f8f6;
}
.rbcg_top {
	width: 100%;
	position: fixed;
	top: 0%;
	.rbcg_top_re {
		width: 100%;
		height: 600rpx;
		position: relative;
	}
	image {
		width: 100%;
		height: 600rpx;
	}
	.texts {
		width: 532rpx;
		height: 44rpx;
		background: rgba(117, 97, 62, 0.2);
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		position: absolute;
		bottom: 68rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #75613e;
		text-align: center;
		line-height: 44rpx;
		left: 50%;
		transform: translate(-50%);
	}
	.dy {
		width: 260rpx;
		height: 260rpx;
		background: linear-gradient(180deg, #ece6d5 0%, #f7f8f6 100%);
		border-radius: 130rpx;
		border: 1px solid #d8c6a7;
		left: 50%;
		transform: translate(-50%);
		position: absolute;
		bottom: 134rpx;
		.t1 {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #75613e;
		}
		.t2 {
			font-family: 'DIN-BOLD';
			font-weight: 500;
			font-size: 72rpx;
			color: #75613e;
		}
	}
	.yy {
		width: 60rpx;
		height: 60rpx;
		background: linear-gradient(180deg, #ece6d5 0%, #f7f8f6 100%);
		border-radius: 30rpx;
		position: absolute;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 20rpx;
		color: #75613e;
		text-align: center;
		line-height: 60rpx;
	}
	.r1 {
		bottom: 214rpx;
		right: 110rpx;
	}
	.l1 {
		bottom: 172rpx;
		left: 140rpx;
	}
	.l2 {
		bottom: 330rpx;
		left: 170rpx;
	}
	.texts1 {
		width: 144rpx;
		height: 52rpx;
		background: rgba(216, 198, 167, 0.3);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		border: 1px solid #d8c6a7;
		position: absolute;
		bottom: 350rpx;
		right: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #b19561;
		line-height: 52rpx;
		text-align: center;
	}
}
.ulist {
	width: 710rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	margin: -50rpx auto;
	position: relative;
	padding-top: 30rpx;
	box-sizing: border-box;
	.title {
		width: 200rpx;
		height: 60rpx;
		background: linear-gradient(270deg, #ffffff 0%, #eee8d8 100%);
		line-height: 60rpx;
		border-left: 2px solid #75613e;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 30rpx;
		color: #75613e;
		padding-left: 20rpx;
		box-sizing: border-box;
	}
	.scroll {
		box-sizing: border-box;
		height: 900rpx;
		overflow: auto;
		padding: 20rpx 30rpx;
		.items {
			margin-bottom: 24rpx;
			padding-bottom: 24rpx;
			border-bottom: 1px solid #d1d1d6;
			.t1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #1b1b1b;
			}
			.time {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #8f8f8b;
				margin-top: 12rpx;
			}
			.items_r {
				font-family: 'DIN-BOLD';
				font-weight: bold;
				font-size: 40rpx;
				color: #75613e;
			}
		}
		.items:last-child {
			border: none;
		}
	}
}
</style>
